<template>
    <!-- 旋转环形 -->
    <!-- 归属组织泄露风险统计 -->
    <div class="chart-container" ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts';
import { riskStatistics } from "@/api/IPOwnershipProtection/dataStatistics.js";
export default {
    name: '',
    created() {
        setTimeout(() => {
            this.initChart()
        }, 1000);
    },
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        this.initChart();
    },

    methods: {
        initChart() {
            let myChart = echarts.init(this.$refs.chartRef)
            riskStatistics().then(res => {
                let peopleList = [
                    { name: '确定风险关系', value: res.data.belongsCount, },
                    { name: '预测风险关系数量', value: res.data.preCount, },
                    { name: '总数据', value: res.data.totalCount, },
                ]
                let total = peopleList.reduce((pre, next) => {
                    return pre + next.value;
                }, 0);

                let numberWidth = String(total).length * 8 + 8;

                peopleList.forEach((item) => {
                    item.percent = total == 0 ? 0 : ((item.value / total) * 100).toFixed(2);
                });

                let color = ['rgba(113, 226, 135, 1)', 'rgba(119, 247, 253, 1)', 'rgba(44, 104, 231, 1)', 'rgba(93, 202, 250, 1)']

                let option = {
                    // backgroundColor: 'rgba(8, 19, 34,1)',
                    color: color,
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        show: true,
                        orient: 'vertical',
                        top: 'center',
                        right: '5%',
                        icon: 'rect',
                        itemGap: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        color: '#fff',
                        formatter: function (name) {
                            let items = peopleList.find((item) => item.name == name);
                            return `{name|${name}}\n{number| ${items?.value || ''}} {unit|}            {percent|${items?.percent + '%' || ''
                                }}`;
                        },
                        itemStyle: {
                            borderWidth: 1,
                        },
                        textStyle: {
                            rich: {
                                number: {
                                    width: numberWidth,
                                    color: '#DDF6FD',
                                    align: 'left',
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    padding: [8, 0, 0, 0]
                                },
                                name: {
                                    color: 'rgba(255,255,255,0.8)',
                                    fontSize: 14,
                                    fontWeight: 400,
                                    fontFamily: 'Source Han Sans CN',
                                    padding: [28, 0, 0, 4]
                                },
                                unit: {
                                    color: 'rgba(255,255,255,0.8)',
                                    fontSize: 12,
                                    fontWeight: 400,
                                    fontFamily: 'Source Han Sans CN',
                                    padding: [0, 0, -8, 0]
                                },
                                percent: {
                                    color: '#DDF6FD',
                                    align: 'left',
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    padding: [6, 0, 0, 0]
                                },
                            },
                        },
                    },
                    title: [
                        {
                            text: '{title|风险统计}',
                            left: '29%',
                            top: '45%',
                            textAlign: 'center',
                            textStyle: {
                                rich: {
                                    title: {
                                        color: '#fff',
                                        fontSize: 18,
                                        fontWeight: '400',
                                    },

                                }
                            },
                        },
                        {
                            // text: '{num|' + total + '},{unit|人}',
                            left: '26%',
                            top: '47%',
                            textStyle: {
                                rich: {
                                    num: {
                                        fontSize: 32,
                                        color: '#9DDBFB',
                                        fontFamily: 'DIN Alternate',
                                        fontWeight: 'bold',
                                    },
                                    unit: {
                                        color: '#9DDBFB',
                                        fontSize: 14,
                                        fontWeight: '400',
                                        padding: [0, 0, -8, 8]
                                    }
                                }
                            },
                        },
                    ],

                    series: [
                        {
                            type: 'pie',
                            radius: ['50%', '60%'],
                            center: ['30%', '50%'],
                            padAngle: 5,
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                shadowColor: 'rgba(255, 255, 255, 0.5)',
                                shadowBlur: 20,
                                borderWidth: 5,
                                borderRadius: 5,

                            },
                            emphasis: {
                                scale: false
                            },
                            data: peopleList,
                        },
                        {
                            type: 'pie',
                            radius: ['40%', '50%'],
                            center: ['30%', '50%'],
                            padAngle: 5,
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                shadowColor: 'rgba(255, 255, 255, 0.5)',
                                shadowBlur: 20,
                                borderWidth: 5,
                                opacity: 0.3,
                            },
                            emphasis: {
                                scale: false
                            },
                            data: peopleList,
                        },


                        {
                            name: "",
                            type: "pie",
                            startAngle: 85,
                            radius: ['35%', '38%'],
                            center: ['30%', '50%'],
                            hoverAnimation: false,
                            startAngle: 90,
                            padAngle: 5,
                            tooltip: {
                                show: false,
                            },
                            itemStyle: {
                                borderCap: 'round',
                                normal: {
                                    color: function (data) {
                                        let tempColor = data.data == 10 ? "rgba(240, 197, 67, 0)" : "rgba(240, 197, 67, 1)"
                                        return tempColor
                                    },
                                },
                            },
                            zlevel: 4,
                            labelLine: {
                                show: false,
                            },
                            data: [100, 100, 100, 100],
                        },

                    ],
                }


                let rotate = 0
                let deg = 50

                run()

                function run() {
                    option.series[1].radius[1] = `${deg}%`
                    option.series[2].startAngle = rotate
                    myChart.setOption(option)
                    myChart.resize()
                    rotate += 1
                    if (deg > 80) {
                        deg = 50
                    }
                    deg += 0.1
                    requestAnimationFrame(run)
                }

                // 柱状图的宽度，y是x的一半

                this.myChart.setOption(option);

                // 监听窗口大小变化，用于自适应  
            })
        },
    }
};  
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 100%;
    /* background-color: #817979; */
}
</style>